<script setup>
import {NAvatar, NButton, NFlex, NForm, NFormItem, NInput, NSelect, NTabPane, NTabs, useMessage, NDrawer, NDrawerContent, NList, NListItem} from "naive-ui";
import api from "@/api";
import {onMounted} from "vue";
import TheIcon from "@/components/icon/TheIcon.vue";

const message = useMessage()
const today = new Date();
const data = reactive({
  search_results:[],
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  card_loading: false,
  doctors: [],
  advisers: [],
  rooms: [],
  dep_users: [],
  devices: [],
  appoint_form: {
    id: 0,
    project_id:[],
    project_name:[],
    doctor_id: [],
    adviser_id: [],
    room_id: [],
    depusers_id: 0,
    device_id: [],
    test_id:0,
    appoint_day: today.toLocaleDateString('en-CA'),
    appoint_time: null,
    longs:0,
    test_remark:'',
    doctor_remark:'',
    adviser_remark:'',
    depuser_remark:'',
    color:"#d95b74"
  },
  projects: [],
  tab_now: 1,
  tab_name: ["", "项目", "医生", "顾问", "诊室",  "仪器", "导医","护士", "时间", "颜色"],
  searchQuery: "",
  user_id:null,
  search_loading:false,
  appoint_room:[],
  appoint_device:[],
  isDeviceTime:false,
  isRoomTime:false,
  btn_loading:false,
  customer_project:[],
  showProjectDrawer:false
});

onMounted(() => {
  get_config()
})

function tab_now(type) {
  data.tab_now = type
}

function get_config() {
  api.getConfig().then((res) => {
    // data.departments = res.data.deps
    data.rooms = res.data.rooms
  })
  api.get_depusers({
    tab:0
  }).then((res) => {
    data.dep_users = res.data.items
    data.select_dep_loading = false
    return true;
  })
  api.getUserList({
    type: 2
  }).then((res) => {
    data.doctors = res.data
  })
  api.getUserList({
    type: 3
  }).then((res) => {
    data.advisers = res.data
  })
  api.getUserList({
    type: 4
  }).then((res) => {
    data.nurses = res.data
  })
  api.getDeviceList().then((res) => {
    data.devices = res.data
  })
  api.getAppointTime().then((res) => {
    data.appoint_room = res.data.appoint_room
    data.appoint_device	 = res.data.appoint_device
  })
  api.getProjectsAllTree().then((res) => (data.projects = res.data))
}

function select_project(item) {
  // data.appoint_form.project_name = item.name
  // data.appoint_form.project_id = item.id
  if (data.appoint_form.project_id.includes(item.id)) {
    data.appoint_form.project_id = data.appoint_form.project_id.filter(id => id !== item.id);
    data.appoint_form.project_name = data.appoint_form.project_name.filter(name => name !== item.name);
  } else {
    data.appoint_form.project_id.push(item.id);
    data.appoint_form.project_name.push(item.name);
  }
}

function select_doctor(item) {
  if (data.appoint_form.doctor_id.includes(item.id)) {
    data.appoint_form.doctor_id = data.appoint_form.doctor_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.doctor_id.push(item.id);
  }
}

function select_adviser(item) {
  if (data.appoint_form.adviser_id.includes(item.id)) {
    data.appoint_form.adviser_id = data.appoint_form.adviser_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.adviser_id.push(item.id);
  }
}

function select_room(item) {
  if (data.appoint_form.room_id.includes(item.id)) {
    data.appoint_form.room_id = data.appoint_form.room_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.room_id.push(item.id);
  }
}

function select_device(item) {
  if (data.appoint_form.device_id.includes(item.id)) {
    data.appoint_form.device_id = data.appoint_form.device_id.filter(id => id !== item.id);
  } else {
    data.appoint_form.device_id.push(item.id);
  }
}

function select_depusers(item) {
  data.appoint_form.depusers_id = item.id
}

function select_test(item) {
  data.appoint_form.test_id = item.id
}

const emit = defineEmits(['call-parent'])
function edit_appoint() {
  data.appoint_form.user_id = data.select_customer.user_id
  if(!data.appoint_form.user_id){
    message.error('请先选择客户')
    return
  }
  api.createAppointment(data.appoint_form).then((res) => {
    message.success('预约成功')
    emit('call-parent')
  })
}

function close_draw(){
  emit('call-parent')
}




function filterChildren(children) {
  if (!data.searchQuery) return children
  const query = data.searchQuery.toLowerCase().trim()
  return (children || []).filter(child => (child?.name || '').toLowerCase().includes(query))
}
let searchTimer = null
function onSearchInput(val){
  data.searchQuery = val
  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    const keyword = (data.searchQuery || '').trim()
    if (!keyword) {
      data.search_results = []
      return
    }
    api.getProjectsAllTree({ name:keyword }).then((res) => {
      const items = res?.data || res?.items || []
      console.log(items)
      data.search_results = items
    }).catch(() => {
      data.search_results = []
    })
  }, 300)
}

function search_customer(query){
  data.search_loading = true
  api.getCustomers({keyword:query}).then((res) => {
     data.select_customers = res.data.items
     data.search_loading = false
  })
}

function change_customer(value){
   api.getCustomer({
    user_id:value,
  }).then((res) => {
     data.select_customer = res.data
     api.getProjectStat({
      user_id:data.select_customer.user_id,
    }).then((res) => {
       data.customer_project = res.data.projects
       data.btn_loading = true
    })
  })
}

function open_project_drawer(){
  data.showProjectDrawer = true
}

// 计算当前时间对应的分钟数
const getCurrentMinutes = () => {
  const now = new Date();
  const currentHour = now.getHours();
  const currentMinute = now.getMinutes();

  // 如果当前时间不在10:00-22:00范围内，则返回边界值
  if (currentHour < 10) return 0;
  if (currentHour >= 22) return 720;

  // 计算从10:00开始的分钟数
  return (currentHour - 10) * 60 + currentMinute;
};

// 初始值设置为当前时间到当前时间+2小时
const currentMinutes = getCurrentMinutes();
const selectedRange = ref([currentMinutes, Math.min(currentMinutes + 120, 720)]);

// 生成时间刻度标记
const timeMarks = computed(() => {
  const marks = {};
  for (let i = 0; i <= 12; i++) {
    const minutes = i * 60;
    marks[minutes] = `${10 + i}:00`;
  }
  return marks;
});

// 计算时长（分钟）
const duration = computed(() => {
  return selectedRange.value[1] - selectedRange.value[0];
});

// 去重项目列表，相同project_name只保留一条，同时过滤掉number小于0的数据
const uniqueProjects = computed(() => {
  const seen = new Set();
  return data.customer_project.filter(item => {
    // 过滤掉number小于0的数据
    if (item.number !== undefined && item.number <= 0) {
      return false;
    }
    
    const projectName = item.project_name || item.name || '';
    if (seen.has(projectName)) {
      return false;
    }
    seen.add(projectName);
    return true;
  });
});

// 格式化工具提示
const formatTooltip = (minutes) => {
  return formatTime(minutes);
};

// 格式化分钟数为时间字符串
const formatTime = (minutes) => {
  const totalMinutes = minutes;
  const hours = Math.floor(totalMinutes / 60) + 10; // 从10点开始
  const mins = totalMinutes % 60;
  return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
};

// 处理变化
const handleChange = (value) => {
  let start= data.appoint_form.appoint_day+' '+formatTime(value[0])
  let end= data.appoint_form.appoint_day+' '+formatTime(value[1])
  data.isRoomTime= false
  data.isDeviceTime= false
  let RoomStatus = []
  let DeviceStatus = []
  data.appoint_form.room_id.forEach(item=>{
    data.appoint_room.forEach(item1=>{
      if(item1.room_id === item){
        item1.time.forEach(item2=>{
          // 所有诊室的预约状态
          RoomStatus.push(item2[0] <= end && start >= item2[1])
        })
      }
    })
  })
  data.appoint_form.device_id.forEach(item=>{
    data.appoint_device.forEach(item1=>{
      if(item1.device_id === item){
        item1.time.forEach(item2=>{
          DeviceStatus.push(item2[0] <= end && start >= item2[1])
        })
      }
    })
  })
  if(data.appoint_form.room_id.length>0){
    const isExist = data.appoint_room.some(item => data.appoint_form.room_id.includes(item.room_id));
    if(RoomStatus.includes(false) && isExist){
      message.info('当前选择诊室存在预约时间重叠',{ duration: 1000 })
    }
  }
  if(data.appoint_form.device_id.length>0) {
    const isExist = data.appoint_device.some(item => data.appoint_form.device_id.includes(item.device_id));
    if (DeviceStatus.includes(false) && isExist) {
      message.info('当前选择仪器存在预约时间重叠', {duration: 1000})
    }
  }
  data.appoint_form.appoint_time = `${data.appoint_form.appoint_day} ${formatTime(value[0])}`;
  data.appoint_form.longs = duration;
};
</script>

<template>
  <NScrollbar style="position:relative;height:calc(100vh - 0px);padding-bottom: 60px">
    <div class="main_header">
              <div style="display: flex">
                <NAvatar :src="data.select_customer.avatar" class="avatar"/>
                <div class="info" style="margin-right: 10px">
                  <span class="name">{{ data.select_customer.name }}{{ data.select_customer.mobile }}</span><br>
                  <span class="no">No.{{ data.select_customer.card_number }}</span>
                </div>
                <n-popover trigger="click" >
                      <template #trigger>
                        <n-button type="info" style="background: rgb(255,255,255,0.5)">
                          <TheIcon icon="material-symbols:search" :size="18" class="mr-5"/>选择客户</n-button>
                      </template>
                      <NSelect
                      v-model:value="data.user_id"
                      :options="data.select_customers"
                      placeholder="输入姓名/病历号/手机号搜索"
                      filterable
                      label-field="all_name"
                      value-field="user_id"
                      style="width: 300px"
                      :loading="data.search_loading"
                      remote
                      clearable
                      @update:value="change_customer"
                      @search="search_customer"/>
                    </n-popover>
              </div>
              <div>
                <TheIcon icon="material-symbols:close" style="cursor:pointer" :size="25" class="mr-5" @click="close_draw"/>
              </div>
            </div>
    <n-card size="small" content-style="padding: 0px;" :bordered="false" :segmented="{content: true,footer: 'soft',}"  style="width: 100%;">
        <template #header>
          <n-h6 prefix="bar" style="margin: 0;font-size: 18px">预约详情</n-h6>
        </template>
        <div class="info11">
          <div class="data_card" style="background: rgba(103,54,126,0.8);" @click="tab_now(1)">
            <span class="tag">预约项目</span>
            <div class="con" >
              <div class="doctor" v-if="data.appoint_form.project_id.length>0" v-for="item in data.appoint_form.project_name">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>
          <div class="data_card" @click="tab_now(2)">
            <span class="tag">预约医生</span>
            <div class="con">
              <div class="doctor" v-for="item in data.doctors.filter(i => data.appoint_form.doctor_id.includes(i.id))"
                   v-if="data.appoint_form.doctor_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(3)" style="background: rgba(123,79,146,0.8);">
            <span class="tag">预约顾问</span>
            <div class="con">
              <div class="doctor" v-for="item in data.advisers.filter(i => data.appoint_form.adviser_id.includes(i.id))"
                   v-if="data.appoint_form.adviser_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(4)" style="background: rgba(146,82,121,0.8);">
            <span class="tag">预约诊室</span>
            <div class="con">
              <div class="doctor" v-for="item in data.rooms.filter(i => data.appoint_form.room_id.includes(i.id))"
                   v-if="data.appoint_form.room_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="tab_now(5)" style="background: rgba(101,82,146,0.8);">
            <span class="tag">预约仪器</span>
            <div class="con">
              <div class="doctor" v-for="item in data.devices.filter(i => data.appoint_form.device_id.includes(i.id))"
                   v-if="data.appoint_form.device_id.length>0">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>
          <div class="data_card" @click="tab_now(6)" style="background: rgba(80,79,146,0.8);">
            <span class="tag">预约导医</span>
            <div class="con">
              <div class="doctor"
                   v-if="data.appoint_form.depusers_id>0">
                <n-avatar class="doctor_avatar" round size="small"
                  :src="data.dep_users.find(u => u.id === data.appoint_form.depusers_id)?.avatar || ''"/>
                  {{ data.dep_users.find(u => u.id === data.appoint_form.depusers_id)?.name || '未命名' }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>
          <div class="data_card" @click="tab_now(7)" style="background: rgba(101,82,146,0.8);">
            <span class="tag">预约护士</span>
            <div class="con">
              <div class="doctor"
                   v-if="data.appoint_form.test_id>0">
                <n-avatar class="doctor_avatar" round size="small"
                  :src="data.nurses.find(d => d.id === data.appoint_form.test_id)?.avatar || ''"/>
                {{ data.nurses.find(d => d.id === data.appoint_form.test_id)?.name || '未命名' }}
              </div>
              <div v-else style="color: #fff">未选择</div>
            </div>
          </div>

          <div class="data_card" @click="" :style="'background:'+data.appoint_form.color">
            <span class="tag">卡片颜色</span>
            <div class="con">
              <div class="doctor">
               <n-color-picker :modes="['hex']" style="width: 80px;height:100%" v-model:value="data.appoint_form.color"/>
              </div>
            </div>
          </div>
          <n-button v-if="data.btn_loading" style="margin-left: 100px;"  type="info" @click="open_project_drawer">可用项目</n-button>

        </div>
      </n-card>
    <n-card size="small" :bordered="false" :segmented="{content: true,footer: 'soft',}" style="width: 100%;">
        <template #header>
          <n-h6 prefix="bar" style="margin: 0;font-size: 18px">请选择{{ data.tab_name[data.tab_now] }}</n-h6>
        </template>
        <div v-show="data.tab_now===1">
          <div style="padding: 0 12px 12px 12px;">
            <n-input
                :value="data.searchQuery"
                @update:value="onSearchInput"
                placeholder="搜索"
                clearable
                style="width: 180px;"
                size="small"
            />
          </div>
          <n-tabs v-if="!data.searchQuery" type="line" animated placement="left" :default-value="1">
            <n-tab-pane :name="item.id" :tab="item.name" v-for="item in data.projects">
              <div class="info11" style="padding: 0;">
                <template v-show="item2.child.length>0" v-for="item2 in item.child" style="display: flex">
                  <div  style="padding:10px 20px;" v-for="item3 in filterChildren(item2.child)" @click="select_project(item3)" :class="data.appoint_form.project_id.includes(item3.id) ? 'data_card2_check' : 'data_card2'">
                      <n-image preview-disabled class="doctor_avatar" round size="small" style="width: 30px;height: 30px;border-radius: 50%"
                            src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                        <div style="margin-left: 10px">
                          {{ item3.name }}
                        </div>

                  </div>
                </template>
              </div>
            </n-tab-pane>
          </n-tabs>
          <div v-else>
              <div class="info11" style="padding: 10px;">
                <div  style="padding:10px 20px;" v-for="item3 in data.search_results" @click="select_project(item3)" :class="data.appoint_form.project_id.includes(item3.id) ? 'data_card2_check' : 'data_card2'">
                  <n-image class="doctor_avatar" round size="small" style="width: 30px;height: 30px;border-radius: 50%"
                    src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                  <div style="margin-left: 10px">
                    {{ item3.name }}
                  </div>
                </div>
              </div>
            
          </div>
        </div>
        <div v-show="data.tab_now===2">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.doctor_id.includes(item.id)?'data_card2_check':'data_card2'"
                 v-for="item in data.doctors" @click="select_doctor(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
            </div>
          </div>
          <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.doctor_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
        </div>
        <div v-show="data.tab_now===3">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.adviser_id.includes(item.id)?'data_card2_check':'data_card2'"
                 v-for="item in data.advisers" @click="select_adviser(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
            </div>
          </div>
          <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.adviser_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
        </div>
        <div v-show="data.tab_now===4">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.room_id.includes(item.id)?'data_card2_check':'data_card2'"
                 v-for="item in data.rooms" @click="select_room(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div v-show="data.tab_now===5">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.device_id.includes(item.id)?'data_card2_check':'data_card2'"
                 v-for="item in data.devices" @click="select_device(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" round size="small"
                          src="https://sass-files.njqianyan.cn//saas/zoQ9He86SsdBWHdvObmm0890iuB7fa9q8rg9Ha68.webp"/>
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div v-show="data.tab_now===6">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.depusers_id===item.id?'data_card2_check':'data_card2'" v-for="item in data.dep_users" @click="select_depusers(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
            </div>
          </div>
          <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.depuser_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
        </div>
        <div v-show="data.tab_now===7">
          <div class="info11" style="padding: 0;">
            <div :class="data.appoint_form.test_id===item.id?'data_card2_check':'data_card2'" v-for="item in data.nurses" @click="select_test(item)">
              <div class="con" style="font-size: 16px;padding:10px 20px">
                <n-avatar class="doctor_avatar" style="border-radius: 50%;width: 35px;height:35px" size="small"
                          :src="item.avatar"/>
                {{ item.name }}
              </div>
            </div>
          </div>
          <n-input :placeholder="data.tab_name[data.tab_now]+'备注'" v-model:value="data.appoint_form.test_remark" style="width: 100%;margin-right: 10px;margin-top: 10px"/>
        </div>
      </n-card>
    <n-card size="small" :bordered="false" :segmented="{content: true,footer: 'soft',}" style="width: 100%;" v-if="data.tab_now>1 && data.tab_now<6">
      <template #header>
        <n-h6 prefix="bar" style="margin: 0;font-size: 18px">请选择时长</n-h6>
      </template>
      <div class="time-range-selector">
        <div class="time-display" style="display: flex;align-items: center">
          <n-date-picker v-model:formatted-value="data.appoint_form.appoint_day" type="date" clearable style="width:200px"/>
          &nbsp;&nbsp;
          <n-text strong>{{ formatTime(selectedRange[0]) }}</n-text>
          &nbsp;&nbsp;<n-text> 至 </n-text>&nbsp;&nbsp;
          <n-text strong>{{ formatTime(selectedRange[1]) }}</n-text>&nbsp;&nbsp;
          <n-text> (时长: {{ duration }}分钟)</n-text>
        </div>
        <n-slider v-model:value="selectedRange" range :min="0" :max="720" :step="10" :marks="timeMarks" :format-tooltip="formatTooltip" @update:value="handleChange"/>
      </div>
    </n-card>
    <div  style="position: absolute;bottom:0;right:0;width:100%;height:60px;background: #f3f3f3;z-index: 99;display: flex;align-items: center">
      <n-button type="primary" size="large" style="margin-left:10px" @click="edit_appoint">
        <TheIcon icon="material-symbols:save-sharp" :size="18" class="mr-5"/>
        保存
      </n-button>
    </div>
  </NScrollbar>
  <n-drawer v-model:show="data.showProjectDrawer" placement="right" width="360">
    <n-drawer-content title="项目详情">
      <n-list bordered>
        <n-list-item v-for="(item, idx) in uniqueProjects" :key="idx">
          {{ item.project_name || item.name || '-' }}
        </n-list-item>
      </n-list>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>
.main_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:60px;
  background: linear-gradient(90deg, #c87373 10%, #67367e 100%);
  padding:0 20px;
  color: #fff;
  .tags{
    margin-right: 5px;
  }
  .avatar{
    width: 40px; height: 40px; margin-right: 10px;border-radius: 50%;
    border:2px solid #fff;
  }

  .info{
    height: 40px;
    line-height: 20px;
    .no{
      font-size: 12px;
    }

  }
}
:deep(.n-color-picker-trigger){
  border:0 !important;
}

:deep(.n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle){
  height: 30px;
  width: 30px;
  background:  rgba(103,54,126,1);
  border:0;
}
.time-display {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 自定义滑块样式 */
:deep(.n-slider-rail) {
  background-color: #e0e0e0;
}

:deep(.n-slider-fill) {
  background-color: #4CAF50;
}

:deep(.n-slider-mark) {
  font-size: 12px;
  color: #666;
  top: 20px;
}

:deep(.n-slider-handle) {
  border: 2px solid #4CAF50;
}

.info11 {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap; /* 子元素自动换行 */

  .data_card2 {
    margin-right: 10px;
    background: #f7f7fa;
    color: #504f4f;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card2_check {
    cursor: pointer;
    margin-right: 10px;
    background: rgba(103, 54, 126, 0.8);;
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card {
    margin-right: 20px;
    background: rgba(200, 115, 115, 0.8);
    color: #fff;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 100px;
    cursor: pointer;

    .tag {
      font-size: 12px;
      color: #fff;
      font-weight: normal;
      position: absolute;
      left: 2px;
      top: 2px;
      background: #f86c95;
      border-radius: 2px;
      padding: 2px 4px;
    }

    .con {
      line-height: 20px;
      font-size: 16px;
      color: rgba(200, 115, 115, 1);
      padding: 10px;
      margin-top: 20px;
      display: flex;

      .doctor {
        height: 40px;
        display: flex;
        align-items: center;
        margin-right: 10px;
        color: #fff;

        .doctor_avatar {
          width: 30px;
          height: 30px;
          border: 1px solid #fff;
          margin-right: 5px;
        }
      }


    }
  }
}
</style>